fix: render entity links correctly with RTL text - #233
Conversation
kellnerd
left a comment
kellnerd
left a comment
There was a problem hiding this comment.
Very interesting, I am not even sure if the previous behavior is some kind of bug in the rendering engine... thank you for reporting @YoGo9!
You are right @arsinclair, in order to keep the entity name as link without this weird glitch, flex-boxes seem to be the proper solution as far as I can see.
However, the list items of the alternative values can't be flex-boxes themselves, with this change they lose their bullet points. We probably need an additional container to achieve the desired outcome.
Also, the same issue potentially affects all entity links, so the CSS changes should target those and not just artist credits.
|
Awesome, then I hope maybe @YoGo9 or @kellnerd can take it forward from here? My PR was just a scratchpad example to show what I mean, neither did I test it well nor have I verified this issue in other areas of the app :) I'd be glad to complete the implementation, but unfortunately I'm very short on time right now. |
|
(I tried, and wasn't successful) |
|
Which part wasn't successful? The solution doesn't work or you were not able to adapt it to Kellner's comments? |
|
Wasn't able to adapt to kellnerds comment |
|
Okay, I'll take a look |
arsinclair
changed the title
8e09579 to
9ca7016
Compare
|
Done I think, testing locally and everything seems to render correctly. |
kellnerd
left a comment
kellnerd
left a comment
There was a problem hiding this comment.
Thank you for coming back to this. Looks good to me as far as I can judge Hebrew, nice and simple CSS changes.
3 participants
Fixes #229.
Entity links containing right-to-left text could be visually reordered by the browser, making it unclear which provider icons and entity names belonged to each link.
This change:
Before the change:
After the change:
Test link:
https://harmony.pulsewidth.org.uk/release?url=https%3A%2F%2Ftidal.com%2Falbum%2F529736650>in=®ion=GB%2CUS%2CDE%2CJP&musicbrainz=&deezer=&itunes=&spotify=&tidal=&qobuz=&beatport=